<template>
  <section class="page">
    <div class="sel-box">
      <el-select v-model="selWidgets" value-key="code" size="mini" >
        <el-option v-for="(type,index) in widgetType" :key="index" :label="type.title" :value="type"  />
      </el-select>
      <div v-if="selWidgets" style="border: 0px solid red;width: 98%;margin:0 auto;margin-top: 2px">
        <draggable :group='{name: "menu", put: false,pull:"clone"}' :sort='false' :value="selWidgets.data">
          <div class="widget-item"  v-for="(widget,index) in selWidgets.data" :key="index">
            <view-widget :widget="widget" :mockData="mockData"></view-widget>
          </div>
        </draggable>
      </div>
      <div v-else>请选择挂件分类</div>
    </div>
    <div class="show-box">
      <draggable :group='{name: "menu", put: true}' @add='addCollection' @update='sortCollection' :value="currPage.widgets" style="border: 0px solid #eee;min-height: 50px">
        <div v-for="(widget,index) in currPage.widgets" :key="index" @click="checkWidgetEvent(index)">
          <el-row :class="widget.checked?'checked':'widget-box'">
            <i class="el-icon-error" @click.stop="deleteWidget(index)"/>
            <edit-widget :widget="widget" v-on:focus="checkWidgetEvent(index)"></edit-widget>
          </el-row>
        </div>
      </draggable>
      <el-button size="mini" type="text" @click="h5Btn">h5预览</el-button>
    </div>
    <div class="widget-config">挂件设置
      <widget-config :widget="currWidget" ></widget-config>
    </div>
    <el-dialog :visible.sync="previewDialog" title="预览">
      <preview-management type="h5" :page="currPage"></preview-management>
    </el-dialog>
  </section>
</template>

<script>
  import previewManagement from '../previewManagement/previewManagement'
  import newObj from '@/common/newWidget'
  import uuid from 'uuid'
  import widgetConfig from '../widget/config/index'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import draggable from 'vuedraggable'
  import viewWidget from '@/components/reportTemplate/widget/view/index'
  import editWidget from '@/components/reportTemplate/widget/edit/index'
  export default {
    name: "page",
    props:['currPage'],
    components:{viewWidget,draggable,widgetConfig,editWidget,previewManagement},
    data(){
      return{
        menu:'testMenu',
        falgs: 'show-box',
        disabled: false,
        widgets:[],
        allWidgets:[],
        widgetType:[],
        selWidgets:null,
        myArray:[],
        drag:false,
        currWidget:null,
        mockData:true,
        previewDialog:false
      }
    },
    created(){
      this.getWidgets()
      this.initPage(this.currPage)
    },
    watch:{
      currPage(nv,ov){
        console.log('看下currpage的变化--------',nv)
        if(nv) this.initPage(nv)
      },
      currWidget(nv,ov){
        // console.log('看下当前挂件-------',nv)
      }
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      initPage(page){
        this.currWidget=page.widgets.find(w=>w.checked)
      },
      deleteWidget (index) {
        console.log('控件的删除事件000',this.currPage.widgets)
        this.currPage.widgets.splice(index, 1)
      },
      addCollection (evt) {
        //找到要插入的位置
        let newIndex = evt.newIndex //1要插入的位置

        //找到要拖入的挂件
        let oldIndex = evt.oldIndex
        let newWidget=this.selWidgets.data[oldIndex] //拖过来的那个挂件
        this.currWidget=newObj.newWidget(newWidget)
        console.log('新建的当前挂件----------',this.currWidget)
        // for(let key in newWidget){
        //   this.currWidget[key]= newWidget[key]
        // }
        // this.currWidget.checked=true//拖入即选中
        this.currPage.widgets.forEach(w=>{//其他的都不选中
          w.checked=false
        })
        //在选中的挂件列表中插入拖入的挂件
        this.currPage.widgets.splice(newIndex, 0, this.currWidget)
      },
      sortCollection (evt) {
        console.log('sortCollection-------------',evt)
        let newIndex = evt.newIndex
        let oldIndex = evt.oldIndex

        let collection = this.currPage.widgets[oldIndex]

        this.currPage.widgets.splice(oldIndex, 1)
        this.currPage.widgets.splice(newIndex, 0, collection)
      },



      getWidgets(){
        this.fetch({name:'getWidgets',data:{}})
          .then(res=>{
            console.log('获得的控件------',res)
            this.getWidgetsAll(res.totalElements)
          }).catch(err=>{
          console.log(err)
          errHandler.handle(this,err)
        })
      },
      getWidgetsAll(size){
        this.fetch({name:'getWidgets',data:{size}})
          .then(res=>{
            console.log('获得的所有控件------',res.content)
            this.getWidgetType(res.content)
          }).catch(err=>{
          console.log(err)
          errHandler.handle(this,err)
        })
      },
      getWidgetType(array){
        array.forEach(a=>{
          let code = a.code.split('-')[0]
          let index = this.widgetType.findIndex(type=>type.code === code)
          if(index <0){
            let currType={code,title:a.title.split('-')[0],data:[a]}
            this.widgetType.push(currType)
          }else {
            this.widgetType[index].data.push(a)
          }
        })
        console.log('看下最后的类型列表----------',this.widgetType)
        // this.widgetType.forEach((type,index)=>{
        //   type.id=index
        // })
      },
      selEnd(e,at){
        console.log('选择移动后-----',e)
        if (e.to.className === 'show-box') {
          this.$set(this.selWidgets.data[e.oldIndex], 'flag', true)
        }
        console.log('看下页面数据-----',this.currPage.widgets[e.oldIndex])
      },
      selStart(e,at){
        console.log('选择移动前-----')
      },
      startMove(e,at){
        this.falgs = 'show-box'
        console.log('show移动前-----',e)
      },
      endMove(e,at){
        console.log('show移动后-----',e)
        this.falgs = 'show-box'
        console.log('看下选择数据-----',this.selWidgets)
      },
      checkWidgetEvent(index){
        this.currPage.widgets=JSON.parse(JSON.stringify(this.currPage.widgets))
        if(this.currPage.widgets[index].checked === undefined){
          Vue.set(this.currPage.widgets[index],'checked',true)
        }else {
          this.currPage.widgets[index].checked=!this.currPage.widgets[index].checked
          // this.currPage.widgets[index].checked=true
        }
        this.currPage.widgets.forEach((w,i)=>{
          if(i !== index){
            w.checked = false
          }
        })
        if(this.currPage.widgets[index].checked){
          this.currWidget=this.currPage.widgets[index]
        }else {
          this.currWidget=null
        }
      },
      h5Btn(){
        console.log('看下当前页面------',this.currPage)
        this.previewDialog=true
      }
    }
  }
</script>

<style lang="scss">
  .page{
    display: flex;
    flex-direction: row;
    /*justify-content: center;*/
  }
  .sel-box, .show-box,.widget-config{
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    border: 0px solid red;
    /*align-items: center;*/
    min-height: 200px;
  }
  .sel-box{
    width: 20%;
  }
  .widget-config{
    width: 20%;
  }
  .show-box{
    width: 60%;
    padding:0px 5px 5px 5px;
    .widget-box,.checked{
      width: 100%;
      padding: 5px;
      /*margin-bottom: 5px;*/
    }
    .widget-box:hover{
      border-style:dashed;
      border-width:1px;
      border-color: #bbb;
    }
    .checked{
      border: 1px solid #eee;
      box-shadow: 0 0 8px #bbb;
    }
  }
  .widget-item{//给左列用
    width: 100%;
    border: 1px solid #eee;
    min-height: 50px;
    display: flex;
    flex-direction: column;
  }
  .el-icon-error{
    display: none;
    color: red;
    position: absolute;
    float: right;
    right: 2px;
    top:2px
  }

  .checked:hover .el-icon-error{
    display: block;
  }
</style>
